<template>
  <div id="home" class="wrapper">
    <!-- 导航 -->
    <Navbar class="home-nav"><div slot="center">购物街</div></Navbar>
       <tabControl
       :titles="['流行', '新款', '精选']" 

       ref="tabcontrol1"

       @tabClick="tabClick"

       class="tab-control"

       v-show="isTabFiexd"
       /> 
    <scroll class="content"
            ref="scroll" 
            :probe-type = '3' 
            :pull-up-load="true"
            @scroll = 'contentscroll'
            @pullingUp = 'loadMore'
            >
      <!-- 轮播图 -->
      <!-- :banners='banners 声明在home-swiper组件中使用的banners来自父组件 -->
      <home-swiper 
      :banners="banners"
      @swiperimageload='swiperimageload'
      ></home-swiper>
      <!-- 推荐页面 -->
      <RecommendView :recommends="recommends"></RecommendView>
      <!-- 本周流行页面 -->
      <Feature></Feature>
      <!-- 流行、新款、精选小组件 -->
      <tabControl
       :titles="['流行', '新款', '精选']" 

       ref="tabcontrol2"

       @tabClick="tabClick"/> 
      <!-- 列表组件 用于保存加载商品数据 -->
      <goodslist :goods="goods[type].list"></goodslist>
      </scroll>
      <!-- 监听回到顶部按钮事件 -->
      <!-- 组件监听需要使用.native -->
      <backTop @click.native="backClick" v-show="isShowBackTop"></backTop>
  </div>
</template>

<script>
// 导入导航条组件
import Navbar from "../../components/common/navbar/Navbar.vue";
// 导入轮播图组件
import HomeSwiper from "./childcomponents/HomeSwiper";
// 导入推荐页面组件
import RecommendView from "./childcomponents/RecommendView";
// 导入本周欧流行页面组件
import Feature from "./childcomponents/Featrue";
// 导入小导航组件
import tabControl from "../../components/content/tabControl/tabControl";
// 导入列表组件
import goodslist from "../../components/content/goods/goodslist";
import goodslistitem from "../../components/content/goods/goodslistitem";
// 导入axios方法
import { getHomeMultidata, getHomeGoods } from "../../network/home";
// 导入商品组件
import Goodslistitem from "../../components/content/goods/goodslistitem.vue";
// 导入封装好的better-scroll
import scroll from "../../components/common/better-scroll/better-scroll";
// 导入backtop组件
import backTop from "../../components/content/backTop/backTop";
// 导入防抖函数
import  {debounce} from '../../components/common/tolls/debounce.js'
export default {
  name: "Home",
  components: {
    Navbar,
    HomeSwiper,
    RecommendView,
    Feature,
    tabControl,
    goodslist,
    goodslistitem,
    Goodslistitem,
    scroll,
    backTop,
    getHomeGoods,
  },
  data() {
    return {
      // 定义一个变量用于保存请求的数据
      result: null,
      banners: [],
      recommends: [],
      isShowBackTop:false,
      goods: {
        'pop': { page: 0, list: [] },
        'new': { page: 0, list: [] },
        'sell': { page: 0, list: [] },
      },
      type: "pop",
      // 上拉加载更多
      // 变量，用于保存tabcontrol的offsettop位置信息
      // tabOffsetTop:0,
      // 默认情况下不吸顶
      isTabFiexd:false,

      // 记录home组件的位置信息 默认为0
      saveY:0
    };
  },
  created() {
    // 调用methods中的函数
    // 轮播图数据
    this.getHomeMultidata();
    // console.log(getHomeMultidata());
    //商品数据
    this.getHomeGoods("new");
    this.getHomeGoods("pop");
    this.getHomeGoods("sell");
  },
  mounted(){
    // 3监听item中图片加载完成
    // this.$bus.$on监听总线发射的事件
    // Vue.prototype.$bus = new Vue() 在发射之前需要在原型中注册
    //  this.$bus.$on('itemimageload',()=>{
    //   // 图片加载完成执行函数
    //   this.$refs.scroll.refresh()
    // })
    const refresh = debounce(this.$refs.scroll.refresh,200)
    this.$bus.$on('itemimageload',()=>{
        refresh()
    })
   
  },
  methods: {
    // 请求数据函数
    getHomeMultidata() {
      // 请求多个数据
      getHomeMultidata().then((res) => {
        // 全部数据
        this.result = res;
        // console.log(res);
        // banners数据
        this.banners = res.data.data.banner.list;
        // recommend数据
        this.recommends = res.data.data.recommend.list;
      });
    },
    // 加载商品数据
    getHomeGoods(type) {
      // 请求商品数据
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // 将数据保存下来
        // console.log(res);
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;
        // 开启上拉加载更多
        this.$refs.scroll.finishPullUp()
      });
    },

    // 事件监听相关的方法
    // tabbarcontrol点击时改变推荐
    tabClick(index) {
      switch (index) {
        case 0:
          this.type = "pop";
          break;
        case 1:
          this.type = "new";
          break;
        case 2:
          this.type = "sell";
          break;
      }
      // 统一两个index
      this.$refs.tabcontrol1.currentIndex = index
      this.$refs.tabcontrol2.currentIndex = index
      // console.log(this.$refs.tabcontrol1.currentIndex);
      // console.log(this.$refs.tabcontrol2.currentIndex);
    },


    backClick(){
      // 回到顶部
      // 通过ref访问scroll中的数据
      // scrollTo(0,0,500) x0 y0 500毫秒回到顶部
      // this.$refs.scroll拿到这个对象
      // .scroll.scrollTo(0,0,500)调用该对象的这个方法回到顶部
      this.$refs.scroll.scrollTo(0,0,500);
      },



      // 加载更多
      // 到底部时执行代码
      // @pullingUp = 'loadMore'
      loadMore(){
        console.log('到底部了,加载更多数据');
        // this.getHomeGoods(this.type)
        // // 从新计算滚动高度
        // this.$refs.scroll.scroll.refresh()
        this.getHomeGoods(this.type)
      },


      // BackTop
      contentscroll(position){
      // backTop是否显示
      this.isShowBackTop = (-position.y) > 800

      // 决定tabcontrol是否吸顶
      // this.isTabFiexd = (-position.y)
      if((-position.y) >this.$refs.tabcontrol2.$el.offsetTop+44){
        this.isTabFiexd = true
      }else{
        this.isTabFiexd = false
      }
      },

      // 实现吸顶效果
      swiperimageload(){
      // // 获取Tabcontrol的offsettop的值
      // // 所有组件都有一个$el属性，可以用于获取组件内部的元素
      // // console.log(this.$refs.tabcontrol.$el.offsetTop);
      // this.tabOffsetTop = this.$refs.tabcontrol.$el.offsettop
      }
      },
      // 在首页离开时（不活跃时）记录一下离开的状态
      activated(){
        this.$refs.scroll.scrollTo(0,this.saveY,0)
        // 进行刷新
        this.$refs.scroll.refresh()
      },
      deactivated() {
        this.saveY = this.$refs.scroll.scroll.y
      },
};
</script>

<style scoped>
#home{
  height: 100vh;
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: white;
  font-size: 15px;
}
/* .titlesticky { */
  /* 该效果在scroll中不起作用了 */
  /* position: sticky;
  top: 44px;
} */

.tab-control{
  position: relative;
  z-index: 10;
}
.content{
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>